<template>
    <!-- 密码修改 -->
    <div style=";margin-top:50px;">
        <el-form
            :model="changePassword"
            status-icon
            :rules="changePasswordRules"
            ref="changePassword"
            label-width="100px"
        >
            <!-- <div class="flex">
                <el-form-item label="验证手机：" prop="authPhone">
                    {{changePassword.authPhone}}
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        :disabled="!canClick"
                        @click="send()"
                    >{{content}}</el-button>
                </el-form-item>
            </div> -->
            <!-- <el-form-item label="验证码：" prop="authCode">
                <el-input clearable v-model="changePassword.authCode" placeholder="请输入验证码"></el-input>
            </el-form-item> -->
            <el-form-item label="新密码：" prop="newPass">
                <el-input
                    type="password"
                    show-password
                    clearable
                    v-model="changePassword.newPass"
                    placeholder="请输入新密码"
                ></el-input>
            </el-form-item>
            <!-- <el-form-item label="当前密码" prop="nowPass">
                <el-input type="password" show-password v-model="changePassword.nowPass" placeholder="请输入当前密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPass">
                <el-input type="password" show-password v-model="changePassword.newPass" placeholder="请输入新密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" show-password v-model="changePassword.checkPass" placeholder="请重复输入新密码"></el-input>
            </el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="submitForm('changePassword')">确认</el-button>
                <el-button type="primary" @click="resetForm('changePassword')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import utils from "../../util/request.js";

export default {
    data() {
        var validatePass3 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.changePassword.newPass) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            content: "发送验证码", // 按钮里显示的内容
            totalTime: 60, //记录具体倒计时时间
            canClick: true, //添加canClick
            changePassword: {
                authPhone: "15079542913", //验证手机
                authCode: "", //验证码
                // nowPass: "",
                newPass: "" //新密码
                // checkPass: ""
            },
            changePasswordRules: {
                // nowPass: [
                //     {
                //         required: true,
                //         message: "请输入当前密码",
                //         trigger: "blur"
                //     }
                // ],
                authCode: [
                    {
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur"
                    }
                ],
                newPass: [
                    {
                        required: true,
                        message: "请输入新密码",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 16,
                        message: "长度在 6 到 16 个字符",
                        trigger: "blur"
                    }
                ]
                // checkPass: [
                //     {
                //         required: true,
                //         validator: validatePass3,
                //         trigger: "blur"
                //     }
                // ]
            }
        };
    },
    methods: {
        // send() {
        //     // 发送验证码
        //     // if (!this.canClick) return; //改动的是这两行代码
        //     this.canClick = false;
        //     this.content = this.totalTime + "s后重新发送";
        //     let clock = window.setInterval(() => {
        //         this.totalTime--;
        //         this.content = this.totalTime + "s后重新发送";
        //         if (this.totalTime < 0) {
        //             window.clearInterval(clock);
        //             this.content = "重新发送验证码";
        //             this.totalTime = 60;
        //             this.canClick = true; //这里重新开启
        //         }
        //     }, 1000);
        //     console.log("验证码")
        // },
        // 确认密码
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                let that = this;
                if (valid) {
                    this.$confirm('此操作将永久修改登录密码，是否继续', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        let that = this;
                        let Base64 = require("js-base64").Base64;
                        let userdata = JSON.parse(Base64.decode(sessionStorage.getItem("userdata")))
                        let data = {id:userdata.id,password:that.changePassword.newPass}
                        // console.log(userdata,data,that.changePassword.newPass===userdata.password)
                        if(that.changePassword.newPass === userdata.password){
                            // console.log("与原密码一致，不能修改")
                            that.$message.error("修改的密码与现在的登录密码相同无法提交，请输入可用的密码！")
                        }else{
                            utils.request("/person/update","post",JSON.stringify(data)).then(resp=>{
                                console.log(resp)
                                if(resp.data.code === 200){
                                    that.$message({
                                        message: "密码修改成功，请重新登录获取权限",
                                        type: "success"
                                    })
                                    sessionStorage.removeItem("userdata")
                                    that.$router.push("/")
                                }else{return}
                            });
                        }
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消修改'
                        });          
                    });
                    
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 重置密码
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created() {
        // console.log(this.personalData.sex)
    }
};
</script>

<style lang="scss" scoped>
.el-input {
    width: 300px;
}
.flex {
    display: flex;
    flex-flow: row wrap;
}
</style>

